<template>
  <div class="header-bar">
    <div class="header-bg">
      <div class="header-title">
        <!-- <img src="~@/assets/img/bar/lxl.png" class="barLoge"> -->
        <div class="neon-warp">
          <a v-on:click="backHome"><span class="neon-text">Home</span></a>
        </div>
        <botton-list></botton-list>
      </div>
      <div class="sel">
        <header-select></header-select>
      </div>
    </div>
  </div>
</template>
<script>
import BottonList from '@/views/index/components/BottonList';
import HeaderSelect from '@/components/headerBar/HeaderSelect';

export default {
  name: 'HeaderBar',
  components: {
		BottonList,
		HeaderSelect,
  },
  methods: {
    backHome() {
      if (window.localStorage.getItem('userRole') == 1) {//eslint-disable-line
        this.$router.push('/adaHome');
      } else if (window.localStorage.getItem('userRole') == 0) {//eslint-disable-line
        this.$router.push('/stuHome');
      }
    },
  },
};
</script>
<style scoped>
a{
  cursor: pointer;
}
.header-bar{
  /* background-color: #fff;
  height: 1.5rem;
  text-align: center;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto; */
  width: 100%;
  background: #ffffff;
  position: fixed;
  top: 0;
  z-index: 999;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
  transition: all .2s;
  transform: translateZ(0);
  display: block;
}
.header-bg{
  float: left;
  height: 100%;
  width: bodyWidth;
  margin: 0 auto;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.header-title{
  display:inline;
}
/* .barLoge{
  float: left; qudaio
  margin: .1rem 1rem 0 8rem;
  width: 1.3rem;
  height: 1.3rem;
border-radius: 50%;
} */
.neon-warp {
  margin: .1rem 1rem 0 6.7rem;
  width: 1.3rem;
  height: 1.3rem;
  /* position: absolute; */
  text-align: center;
}
.neon-warp span {
  display: block;
}
.neon-text {
  font-family: 'Consolas', cursive;
  font-size: 1.2rem;
  animation: neon 2s infinite;
}
 @keyframes neon {
  0%, 30%, 32%, 34% {
    color: #888888;
    text-shadow: -.03rem 0px .05rem #888888, 0px 0px .02rem #888888;
  }
  31%, 33%, 35%, 100% {
    color: #66cccc;
    text-shadow: -.03rem 0px .05rem #66cccc, 0px 0px .02rem #66cccc;
  }
}
h1{
  font-family: "SourceHanSansCN Heavy";
  font-size: 0.06rem;
  height: headerHeight;
  line-height: headerHeight;
  color: #0061ff;
  cursor:pointer;
}
.sel{
  float: left;
  margin-top: 0.05rem;
  margin-right: 0.06rem;
  z-index: 1000;
}
</style>
